<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    h1 标题 :
    h后面数字 取值范围:  1~6
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<!--水平分割线-->
<hr>
<!--
      font 标签常用属性
                color: 颜色
                size : 改变字体大小  范围:1~7
                face : 字体
                <i>,<em> : 斜体
                <b>,<strong> : 加粗
      <标签  属性的名称="属性的值">
 -->
<p>段落，我想<font color="red" size="1">回家</font></p>
<p>段落，我想<font color="red" size="2">回家</font></p>
<p>段落，我想<font color="red" size="6">回家</font></p>
<p><strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想，</em>想从</p>
<p>一直以来<font color="#7fff00" size="3"><b><i>，黑马程序员以技术视</i></b></font>角关注IT产业发展，以深度分享推进产</p>
<p>段落，我想<font color="red" size="7" face="仿宋">回家</font></p>
<!--
    ./ 代表当前文件路径
    ../ 代表上一级文件路径
    ../../ 代表上上一级路径
    常用属性:
            src : 指定图片路径
            width : 指定图片宽度
            height : 图片高度
            alt : 文件加载失败时的提示信息
-->
<img src="../web/DownLoad/1.gif" alt="文件加载失败的提示信息"/>
<img src="./img/1.gif" width="50%" alt="文件加载失败的提示信息"/>
<!--无序列表
            ul
                li 列表项
            type属性 . 小圆圈, 小方块, 默认小黑点
  -->
<ul type="square">
    <li>无序列表1</li>
    <li>无序列表2</li>
</ul>
<!--
            有序列表
            常用属性:
                type : 指定序号的类型
                start : 从几开始,必须得写数字
        -->
<ol type="a" start="2">
    <li>有序列表1</li>
    <li>有序列表2</li>
</ol>

<!--友情链接
    <a> ：超链接标签
    herf：指定要跳转的链接地址，需要加上http协议，如果访问的是本地的html文件，可以直接写文件路径
    target： 以什么方式打开
        _self :默认打开方式，当前窗口
        _blank:新建一个标签页打开页面
-->
<ul>
    <li style="display: inline"><a href="http://www.baidu.com">百度网</a></li>
    <li style="display: inline"><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
</ul>

<!--
            table
                常用属性:
                    border : 指定边框
                    width  : 	宽度
                    height : 	高度
                    bgcolor:	背景色
                    align	:  对齐方式
                tr 标签  行数
                td 标签  列数
        -->
<table border="1px" width="400px" bgcolor="#7fff00" align="center">
    <tr bgcolor="#6495ed" align="center">
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td bgcolor="aqua" align="center">1</td>
        <td>1</td>
    </tr>
    <tr>
        <td bgcolor="aqua" align="center">1</td>
    </tr>
</table>

<!--
            表格的合并
                colspan :  跨列
                rowspan :  跨行
             表格的嵌套
        -->
<table border="1px" width="400px">
    <tr>
        <td colspan="2">11</td>

        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>21</td>
        <td colspan="2" rowspan="2">
            <table border="1px" width="100%">
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </table>
        </td>
        <td>24</td>
    </tr>
    <tr>
        <td>31</td>

        <td>34</td>
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td rowspan="2">44</td>
    </tr>
    <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
    </tr>
</table>

<!--
        表单标签 form
            action : 直接提交的地址
            method :
                    get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                    post 方式  会将参数封装在请求体中, 没有这样的限制

        input :
            type: 指定输入项的类型
                text : 文本
                password :  密码框
                radio :		单选按钮
                checkbox :  复选框
                file 	 : 上传文件
                submit   : 提交按钮
                button 	 : 普通按钮
                reset	 : 重置按钮
                hidden  : 隐藏域
                date    : 日期类型
                tel     : 手机号
                number   : 只允许输入数字
            placeholder : 指定默认的提示信息
            name : 在表单提交的时候,当作参数的名称
            id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它

        textarea : 文本域, 可以输入一段文本
                    cols : 指定宽度
                    rows : 指定的是高度

        select  : 下拉列表
            option : 选择项
    -->
<form action="注册界面.html" method="post">
    <!--隐藏域
        主要是用来存放页面上一些ID信息
    -->
    <input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid">
    <!--文本输入框-->
    用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"><br>
    <!--密码框-->
    密码：<input type="password" name="password" id="password" placeholder="请输入密码"><br>
    确认密码：<input type="password"><br>
    邮箱：<input type="text"><br>
    手机号码：<input type="tel"><br>
    靓照：<input type="file"><br>
    <!--radio 如果想要一组需要给每一个相同的name值sex-->
    性别：<input type="radio" name="sex">男
    <input type="radio" name="sex">女
    <input type="radio" name="sex">妖<br>
    爱好：<input type="checkbox"/>抽烟
    <input type="checkbox"/>喝酒
    <input type="checkbox"/>烫头
    <input type="checkbox"/>撸代码
    <input type="checkbox"/>大宝剑
    <br/>
    择偶要求：<textarea cols="40" rows="4"></textarea><br>
    籍贯：<select>
    <option>--请选择--</option>
    <option>湖北</option>
    <option>内蒙古</option>
    <option>火星</option>
</select>
    <br>
    出生日期：<input type="datetime-local"><br>
    验证码：<input type="text"><br>

    <input type="submit" value="注册">
    <input type="button" value="普通按钮">
    <input type="reset" value="重置按钮">
</form>

<!--
		如果使用frameset 需要将body标签取掉
			cols : 按列划分页面
			rows : 按行划分页面

<frameset rows="15%,*">
    <frame src="aaa.html" />
    <frameset cols="15%,*">
        <frame src="bbb.html"/>
        <frame src="ccc.html" name="rightFrame"/>
    </frameset>
</frameset>
-->

<!--快标签
    div标签：默认占一行，自行换行
    span标签：内容显示在同一行
-->
<div>张三</div>
<div>李四</div>
<span>王五</span>
<span>赵六</span>

<!--
	CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
	           所以要正常排版需要清除浮动
				float属性:
					left
					right

				clear属性: 清除浮动
					both : 两边都不允许浮动
					left: 左边不允许浮动
					right : 右边不允许浮动
			流式布局,放大缩小不会消失
		-->
<div style="float:left;width: 200px; height: 200px; background-color: red;"></div>
<div style="clear: both;"></div>
<div style="float: left;width: 250px; height: 200px; background-color: greenyellow;"></div>
<div style="float: left;width: 200px; height: 200px; background-color: blue;"></div>
<div style="clear: both;"></div>

<!--盒子模式-->
<div style="border: 3px solid red;width: 400px;height: 400px;">
    <div style="border: 3px solid gray;width: 100px;height: 100px;padding: 30px 20px 30px 10px;">
        这是一个盒子模式，padding: 30px 20px 30px 10px，上右下左
    </div>
    <div style="border: 3px solid green;width: 150px;height: 150px;">
        这是另一个盒子模式
    </div>
    <!--绝对位置 -->
    <div style="border: 3px solid greenyellow;width: 100px;height: 100px;position: absolute;bottom: 100px;right: 50px;">
        盒子模式中，这是一个绝对位置，position: absolute;bottom: 100px;right: 50px;距离下边界和右边界
    </div>
</div>
</body>
</html>